import './index.scss'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Row, Col, Select } from 'antd';
import { useNavigate } from "react-router-dom"
import { useState } from 'react';
import axios from '../../utils/axios'
const { Option } = Select;
interface type {
  setShow:Function
}
const Login = () => {
  const [show,setShow] = useState(true)
  return <div className='loginBg'>
    <h1>枫叶·IQC质量管理系统</h1>
    <div className='img'>
      <img src={require('../../assets/login/u991.png')} alt="!" />
    </div>
    <div className='right'>
      {show ? <LoginForm setShow={setShow}/> : <Register setShow={setShow}/>}
    </div>
  </div>
}

const LoginForm = (props:type) => {
  const navigate = useNavigate()
  const login = () => {
    navigate('/home')
  }
  const onFinish = (values: any) => {
    // login()
    axios({
      url: '/shiro/logintwo',
      method:'get',
      params:{
        username:values.username,
        password:values.password
      }
    }).then(res =>{
      if(res.data.success === true) {
        console.log(res.data.token)
        sessionStorage.setItem('token',res.data.token)
        sessionStorage.setItem('power',JSON.stringify(res.data.data)) 
        login()
      }
    }).catch(error => console.log(error))
  };
  const register = () => {
    props.setShow(false)
  }
  return <>
    <Form
      name="basic"
      wrapperCol={{ span: 16, offset: 4 }}
      onFinish={onFinish}
      size="large"
      autoComplete="off"
    >
      <Form.Item>
        <Row justify='center'>
          <Col> <p>登录</p></Col>
        </Row>
      </Form.Item>
      <Form.Item
        name="username"
        rules={[{ required: true, message: '请输入用户名后登录' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入你的密码' }]}
      >
        <Input.Password
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入登录密码"
        />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked">
        <Row justify='space-between'>
          <Col>
            <Checkbox>记住用户名</Checkbox>
          </Col>
          <Col>
            <span onClick={register} className='register'>注册用户</span>
          </Col>
        </Row>
      </Form.Item>
      <Form.Item>
        <Row justify='center'>
          <Col>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Col>
        </Row>
      </Form.Item>
    </Form>
  </>
}

const Register = (props:any) => {
  const onFinish = (values: any) => {
    props.setShow(true)
    console.log('Success:', values);
  };
  const register = () => {
    props.setShow(true)
  }
  return <>
    <Form
      name="basic1"
      labelCol={{ span: 7 }}
      wrapperCol={{ span: 12 }}
      onFinish={onFinish}
      size="large"
      autoComplete="off"
    >
      <Form.Item>
        <Row justify='center'>
          <Col offset={18} push={2}><p>注册</p></Col>
        </Row>
      </Form.Item>
      <Form.Item
        label="用户账号"
        name="username"
        rules={[{ required: true, message: '请输入用户账号' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="用户名称"
        name="username1"
        rules={[{ required: true, message: '请输入用户名称' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="公司"
        name="username2"
        rules={[{ required: true, message: '请选择用户名称' }]}
      >
        <Select
          placeholder="请选择您所在的公司"
          allowClear
        >
          <Option value="国信安">国信安</Option>
          <Option value="蜗牛">蜗牛</Option>
          <Option value="黑马">黑马</Option>
        </Select>
      </Form.Item>
      <Form.Item
        label="公司"
        name="username3"
        rules={[{ required: true, message: '请选择所在部门' }]}
      >
        <Select
          placeholder="请选择您所在的部门"
          allowClear
        >
          <Option value="研发部">研发部</Option>
          <Option value="工程部">工程部</Option>
          <Option value="质控部">质控部</Option>
          <Option value="零件分厂">零件分厂</Option>
          <Option value="其他">其他</Option>
        </Select>
      </Form.Item>
      <Form.Item
        label="邮箱"
        name="username4"
      >
        <Input type="text" />
      </Form.Item>
      <Form.Item>
        <Row>
          <Col push={22} offset={6}>
            <Button onClick={register} size='small' type="primary">取消</Button>
          </Col>
          <Col push={24}>
            <Button size='small' type="primary" htmlType="submit">注册</Button>
          </Col>
        </Row>

      </Form.Item>
    </Form>
  </>
}



export default Login